<template>
    <div class="coursePage">
        <div class="blackPage" v-if="isShow"></div>
        <div class="selector">
             <ul class="clearfix tab">
                 <li @click="changeTab(0)">
                     难易程度
                     <i v-if="cur==0" class="iconfont icon-xia  xia"></i>
                     <i v-else class="iconfont icon-shang toubiao"></i>
                 </li>
                 <li @click="changeTab(1)">
                     不限器材
                     <i v-if="cur==1" class="iconfont icon-xia  xia"></i>
                     <i v-else class="iconfont icon-shang toubiao"></i>
                 </li>
                 <li @click="changeTab(2)">
                     不限部位
                     <i v-if="cur==2" class="iconfont icon-xia  xia"></i>
                     <i v-else class="iconfont icon-shang toubiao"></i>
                 </li>
                 
             </ul>
             <div class="itemBox" v-if="isShow" >
                 <ul>
                     <li class="item-li" :class="{'active':liIndex==0}" @click="liIndex=0">不限部位</li>
                     <li class="item-li" :class="{'active':liIndex==1}" @click="liIndex=1">全身</li>
                     <li class="item-li" :class="{'active':liIndex==2}" @click="liIndex=2">腹部</li>
                     <li class="item-li" :class="{'active':liIndex==3}" @click="liIndex=3">腿部</li>
                     <li class="item-li" :class="{'active':liIndex==4}" @click="liIndex=4">手臂</li>
                     <li class="item-li" :class="{'active':liIndex==5}" @click="liIndex=5">臀部</li>
                     <li class="item-li" :class="{'active':liIndex==6}" @click="liIndex=6">胸部</li>
                     <li class="item-li" :class="{'active':liIndex==7}" @click="liIndex=7">背部</li>
                     <li class="item-li" :class="{'active':liIndex==8}" @click="liIndex=8">肩部</li>
                    
                 </ul>
             </div>
        </div>
        <div >
            <div v-for="(item,index) in course" :key="index">
                <courseItemPage :data='item' />
            </div>
            <div class="fiexHeight">

            </div>
        </div>
    </div>
</template>

<script>
import courseItemPage from '../../components/Course/CourseItem'
export default {
    components:{
        courseItemPage
    },
    data() {
        return {
            course:[],
            cur:0,
            isShow:false,
            liIndex:0,
        }
    },
    mounted() {
        this.api.GetCourse().then(res=>{
            
            if(res.data.success){
                this.course= res.data.courseData
            }
        })
    },
    methods: {
        changeTab(index){
            this.isShow=!this.isShow;
            this.cur=index;
        }
    },
}
</script>

<style lang="less" scoped>
.coursePage{
    background: #fff;
    height: 100%;
    position: relative;
    .blackPage{
        width: 100%;
        height: 90%;
        position: absolute;
        top: 1rem;;
        left: 0;
        z-index: 2;
        background: rgba(0,0,0,.3)
    }
}
.fiexHeight{
    height: 1.5rem;
}
.selector{
    position: relative;
    .tab{
        background: #eee;
        height: 1rem;
    }
    li{
        padding-left: 0.2rem;
        width: 33.33%;
        height: 100%;
        line-height: 1rem;
        box-sizing: border-box;
        float: left;
        font-size: 0.36rem;
        color: #333;
        position: relative;

    }
    .toubiao{
        position: absolute;
        top: 0rem;
        right: 0.2rem;
        color: #333;
        font-size: 0.64rem;
    }
    .xia{
        position: absolute;
        top: 0rem;
        right: 0.2rem;
        color: #555;
        font-size: 0.48rem;
    }
    .itemBox{
        width: 100%;
        position: absolute;
        top: 1rem;
        background: #fff;
        padding: 0.2rem 0.15rem;
        z-index: 3;
        box-sizing: border-box;
        .item-li{
            border: 1px solid #ccc;
            width: 23%;
            text-align: center;
            height: 0.6rem;
            line-height: 0.5rem;
            border-radius: 0.3rem;
            padding: 0;
            font-size: 0.32rem;
            margin-right: 0.12rem;
            margin-bottom: 0.2rem;
        }
        .item-li.active{
            background: rgb(245,217,6)
        }
    }
    
}
</style>